<template>
  <div class="trainMonitor">
    <el-row>
      <el-col :span="24"
              class="trainMonitor-opeate"
              align="right">
        <span>选择日期</span>
        <el-date-picker v-model="requestParam.time_range"
                        @change="chooseTime"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-select v-model="requestParam.project_id"
                   class="search-select"
                   placeholder="请选择项目">
          <el-option label="项目名称"
                     value=""></el-option>
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="requestParam.name"
                  class="search-input"
                  placeholder="输入司机姓名或车牌号"></el-input>
        <el-button @click="onSearch"
                   type="primary">查询</el-button>
      </el-col>
      <el-col :span="24"
              class="trainMonitor-table">
        <el-table :highlight-current-row='true'
                  border
                  :header-cell-style="{background:'#f5f5f5'}"
                  :data='carTable'>
          <el-table-column label='序号'
                           align='center'>
            <template slot-scope="scope">
              <span>{{scope.$index+(requestParam.page - 1) * requestParam.page_size + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='car_number'
                           label='车次编号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='车牌号'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.car_number_car?scope.row.car_number_car.car_num:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label='司机姓名'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.car_number_car?scope.row.car_number_car.leader:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label='联系电话'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.car_number_car?scope.row.car_number_car.leader_phone:''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='gps_num'
                           label='北斗定位'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.car_number_gps?scope.row.car_number_gps.gps_num:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label='运输时间'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.car_number_car?scope.row.car_number_car.updated_at:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label='操作'
                           width="200"
                           align='center'>
            <template slot-scope="scope">
              <el-button type="primary"
                         icon="el-icon-view"
                         size="mini"
                         @click="jump(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              align="center">
        <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.page_size'
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='total'
                       align='center'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { trainMonitorApi } from '@/services/WorkCenter'
export default {
  data () {
    return {
      form: {
        time: '',
        proName: '0',
        search: ''
      },
      options: [],
      requestParam: {
        name: '',
        time_range: '',
        project_id: '',
        page: 1,
        page_size: 10
      },
      carTable: [],
      total: 0
    }
  },
  methods: {
    handlePageChange (val) {
      this.requestParam.page = val
      this.getData()
    },
    onSearch () {
      this.handlePageChange(1);
    },
    getData () {
      trainMonitorApi.getCarList({
        params: this.requestParam
      }).then(res => {
        this.carTable = res.data.data;
        this.total = res.data.total;
        console.log('++++', this.carTable)
      })
    },
    jump (id) {
      this.$router.push({ path: 'trainDetail', query: { id: id } })
    },
    // 选择开始时间及结束时间
    chooseTime () {
      if (this.requestParam.time_range != null) {
        this.requestParam.start_time = this.requestParam.time_range[0];
        this.requestParam.end_time = this.requestParam.time_range[1];
      } else {
        this.requestParam.start_time = '';
        this.requestParam.end_time = '';
      }
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
.trainMonitor {
  padding: 20px;

  .trainMonitor-opeate {
    margin-bottom: 20px;

    .search-select {
      width: 20%;
    }

    .search-input {
      width: 20%;
    }
  }

  .trainMonitor-table {
    margin-bottom: 20px;
  }
}
</style>
